<script lang="ts" name="index" setup>
import { ColumnsTypes } from '@/components/ProTable/types'
import { Plus, Delete, View, Edit } from '@element-plus/icons-vue'
import {
  getSysUserList,
  addSysUserItem,
  updateSysUserItem,
  detailSysUserItem,
  deleteSysUserItem
} from '@/api/user'
import { useFormItem } from '@/components/ProTable/hooks/useFormItem'
import { useTooptip } from '@/hooks/useToolTip'
import { SysState } from '@/injectKey'
// import { usePublicStore } from '@/store'

// import { setTreeData } from '@/utils'

// const treeData = ref<any>([])
// const formSelectTreeData = async () => {
//   try {
//     const res = await getSysUserList({})
//     let treeObj = {
//       menuId: 0,
//       menuName: '主目录',
//       children: setTreeData(res.data, 'menuId')
//     }
//     treeObj = JSON.parse(
//       JSON.stringify(treeObj)
//         .replace(/menuId/g, 'value')
//         .replace(/menuName/g, 'label')
//     )
//     treeData.value = [treeObj]
//   } catch (err) {
//     console.log(err)
//   }
// }
// formSelectTreeData()

// const publicStore = usePublicStore()
// publicStore.fetchDeptTree()
// onMounted(() => {
//   publicStore.fetchDeptTree()
// })

const columns: ColumnsTypes[] = reactive([
  {
    type: 'input',
    label: '用户账号',
    prop: 'userName',
    value: '',
    showInSearch: true,
    attrs: {
      placeholder: '请填写用户账号',
      clearable: true
    }
  },
  {
    type: 'input',
    label: '用户名称',
    prop: 'nickName',
    value: '',
    attrs: {
      placeholder: '请填写用户名称',
      clearable: true
    }
  },
  {
    type: 'input',
    label: '手机',
    prop: 'phonenumber',
    value: '',
    showInSearch: true,
    attrs: {
      placeholder: '请填写手机号',
      clearable: true
    }
  },
  {
    type: 'tree-select',
    label: '部门',
    prop: 'deptId',
    value: '',
    showInSearch: true,
    attrs: {
      // data: publicStore.department,
      placeholder: '请选择部门',
      clearable: true
      // checkStrictly: true,
      // defaultExpandedKeys: [0]
    }
  },
  {
    type: 'select',
    label: '状态',
    prop: 'status',
    value: 0,
    searchValue: 0,
    showInSearch: true,
    attrs: {
      placeholder: '请选择状态',
      clearable: true
    },
    children: [
      {
        label: '停用',
        value: 1
      },
      {
        label: '正常',
        value: 0
      }
    ]
  },
  {
    label: '操作',
    prop: 'operation',
    hideInForm: true,
    attrs: {
      fixed: 'right',
      width: 200
    }
  }
])

const proTable = ref()
const formItemRef = ref()
const formTitle = ref<string>('用户管理')

const {
  isAdd,
  readonly,
  initForm,
  formColumns,
  model,
  rules,
  visibleDrawer,
  resetForm,
  open,
  close,
  submit
} = useFormItem(
  detailSysUserItem,
  addSysUserItem,
  updateSysUserItem,
  columns,
  'menuId'
)

provide(SysState, {
  model,
  readonly
})

onMounted(() => {
  initForm()
})

const submitForm = async () => {
  await submit()
  proTable.value.search()
}

const openMsgBox = async (id: any) => {
  await useTooptip(deleteSysUserItem, id, '删除所选数据')
  proTable.value.search()
}
</script>

<template>
  <ProTable
    ref="proTable"
    :columns="columns"
    :request="getSysUserList"
    :span="6"
    :is-page="false"
    row-key="menuId"
    data-key="rows"
  >
    <template #tableHeader>
      <el-button type="primary" :icon="Plus" @click="open({ isNew: true })"
        >新增</el-button
      >
    </template>

    <template #tableStatus="scope">
      <el-tag :type="scope.row.status === '0' ? 'success' : 'info'">{{
        scope.row.status === '0' ? '正常' : '停用'
      }}</el-tag>
    </template>

    <template #tableOperation="scope">
      <el-button
        link
        type="primary"
        :icon="View"
        size="small"
        @click="open({ id: scope.row.userId, isRead: true })"
        >查看</el-button
      >
      <el-button
        link
        type="primary"
        :icon="Edit"
        size="small"
        @click="open({ id: scope.row.userId })"
        >编辑</el-button
      >
      <el-button
        link
        type="danger"
        :icon="Delete"
        size="small"
        @click="openMsgBox([scope.row.userId])"
        >删除</el-button
      >
    </template>
  </ProTable>

  <FormItem
    ref="formItemRef"
    v-model:model="model"
    v-model:visibleDrawer="visibleDrawer"
    :is-add="isAdd"
    :readonly="readonly"
    :form-title="formTitle"
    :form-columns="formColumns"
    :rules="rules"
    :reset-form="resetForm"
    :close="close"
    @submit-form="submitForm"
  >
    <template #formIcon>
      <IconItem />
    </template>
  </FormItem>
</template>
